<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>PhyloBox</title>
    <meta name="description" content="PhyloBox Editor">
    <script type="text/javascript" src="/static/javascript/jquery.js"></script>  
    <script type="text/javascript" src="/static/javascript/generalUI.js"></script>  
    
    <link rel="stylesheet" href="/static/css/header.css" /> 
    <link rel="stylesheet" href="/static/css/treeedit.css" /> 
    <link rel="stylesheet" href="/static/css/editorMenu.css" /> 
    <link rel="stylesheet" href="/static/css/toolMenu.css" /> 
    <script language="javascript">
    
        var key = '{{ key }}';
        var Nodes = {};
        var rootId = false;
        var maxDepth = 0;
        var leafNodes = [];
        var nodeDepths = {};
        var TREE_TYPE = 'dendrogram';
        var NODE_RADIUS = 5;
        var stepX = 0;
        var stepY = 0;
        var HOVER_NODE_ID = -1;
        var method = 'tmp';
        var Author = 'none';
        
        
        function stripContents(oEle) { 
            if ( oEle.hasChildNodes() ) { while ( oEle.childNodes.length >= 1 ) { oEle.removeChild( oEle.firstChild );
        } } }
        
        
        function NodeHover() {
            
            HOVER_NODE_ID = this.id;
            
            var elem = document.getElementById("highlight-node");
            var ctx = elem.getContext("2d");
            ctx.fillStyle = '#1d1d1d';
            ctx.fillRect(0, 0, elem.width, elem.height);
            var blank = true;
            
            if (Nodes[this.id]["uri"]) {
                if (Nodes[this.id]["uri"]["icon"]) {
                    var icon = new Image();
                    icon = new Image();
                    icon.onload = function() {
                                        var w = 80/0.76;
                                        var h = 80;
                                        h = h * (icon.height/icon.width);
                                        ctx.drawImage(icon, 80, 50, w,h);
                                     }
                    icon.src = Nodes[this.id]["uri"]["icon"];
                    blank = false;
                }
            }
            if (blank) {
                ctx.fillStyle = this.style.color
                ctx.fillRect(0, 0, elem.width, elem.height);
            }
            
            ctx.font = '400 24px/2 Unknown Font, sans-serif';
            if(Nodes[this.id]["name_txt"]){
                ctx.strokeText(Nodes[this.id]["name_txt"],10,20,50);
            } else {
                ctx.strokeText(Nodes[this.id]["gpe_node_id"],10,20,50);
            }
            
            
        }
        
        function setTreeDepth(id,depth){
            Nodes[id]['depth'] = depth;
            
            if (maxDepth<depth){maxDepth=depth};
            
            if (depth in nodeDepths){
                nodeDepths[depth].push(id);
            } else {
                nodeDepths[depth] = [];
                nodeDepths[depth].push(id);
            }
                
            var nDepth = depth+1;
            for(var x=0; x < Nodes[id]['children'].length; x++) {
                var cid = Nodes[id]['children'][x]['gpe_node_id'];
                setTreeDepth(cid,nDepth);
            }
        }
        function setLeafNodes(w,h){
            x = 0.97;
            y = 0.03;
            var ct = leafNodes.length;
            stepY = (0.98)/ct;
            for(var i=0; i < leafNodes.length; i++) {
                id = leafNodes[i];
                Nodes[id]['Dx'] = x;
                Nodes[id]['Dy'] = y;
                Nodes[id]['Dr'] = NODE_RADIUS;
                y = y+stepY;
            }
        }
            
        
        function setHTUNodes(w,h){
            stepX = (0.96)/maxDepth;
            var curX = 0.98 - stepX;
            
            var depth = maxDepth-1;
            while (-1<depth){
                for(var i=0; i < nodeDepths[depth].length; i++) {
                    var id = nodeDepths[depth][i];
                    if (0<Nodes[id]['children'].length){
                        var curY = 0;
                        var ct = 0;
                        for(var k=0; k < Nodes[id]['children'].length; k++) {
                            ct++;
                            var cid = Nodes[id]['children'][k]['gpe_node_id'];
                            curY = curY + Nodes[cid]['Dy'];
                        }
                        curY = curY/ct;
                        Nodes[id]['Dx'] = curX;
                        Nodes[id]['Dy'] = curY;
                        Nodes[id]['Dr'] = NODE_RADIUS;
                        
                    }
                }
                curX = curX - stepX;
                depth = depth-1;
            }
        }
        function drawDendrogram(ctx,w,h){
            setInterval(function(){
                ctx.fillStyle = "#1d1d1d";
                ctx.fillRect(0, 0, w, h);
                var xindex = 'Dx';
                var yindex = 'Dy';
                for(var i in Nodes) {
                    if (xindex in Nodes[i]) {
                        var parent_id = Nodes[i]['parent_gpe_id'];
                        ctx.fillStyle = '#' + Nodes[i]['branch_color'];
                        ctx.strokeStyle = '#' + Nodes[i]['branch_color'];
                        //draw node
                        ctx.beginPath();
                        if (i == HOVER_NODE_ID){
                            ctx.arc(Nodes[i][xindex]*w, Nodes[i][yindex]*h, 2*Nodes[i]['Dr'], 0, Math.PI*2, true);
                        } else {
                            ctx.arc(Nodes[i][xindex]*w, Nodes[i][yindex]*h, Nodes[i]['Dr'], 0, Math.PI*2, true);
                        }
                        
                        //draw branchs
                        if (parent_id != 0){
                            if (xindex in Nodes[parent_id]) {
                                ctx.lineWidth  = 4;
                                ctx.moveTo(Nodes[i][xindex]*w-NODE_RADIUS, Nodes[i][yindex]*h);
                                ctx.lineTo(Nodes[parent_id][xindex]*w+(0.01*w)+NODE_RADIUS, Nodes[i][yindex]*h);
                                ctx.moveTo(Nodes[parent_id][xindex]*w+(0.01*w)+NODE_RADIUS, Nodes[i][yindex]*h);
                                ctx.lineTo(Nodes[parent_id][xindex]*w+(0.01*w)+NODE_RADIUS, Nodes[parent_id][yindex]*h);
                                ctx.moveTo(Nodes[parent_id][xindex]*w+(0.01*w)+NODE_RADIUS, Nodes[parent_id][yindex]*h);
                                ctx.lineTo(Nodes[parent_id][xindex]*w+NODE_RADIUS, Nodes[parent_id][yindex]*h);
                                
                            }
                        }
                            
                        ctx.stroke();
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            HOVER_NODE_ID = -1;
            }, 80);
        };
        
        
        function plotDendrogram(){
            var elem = document.getElementById("tree-canvas");
            var ctx = elem.getContext("2d");
            var w = elem.width;
            var h = elem.height;
            var y = 0;
            setTreeDepth(rootId,0);
            setLeafNodes(w,h);
            setHTUNodes(w,h);
            drawDendrogram(ctx,w,h);
        }
        
         
            
        
        $(document).ready(function(){
            
            $('#tree-canvas').attr('width',$('body').width()*(0.56));
            
            //lookup method can also take a callback variable, get or post
            //Full URL: http://phylobox.appspot.com/lookup
            var url = "/lookup";
            var parameters = {'k': key};
            
            method = key.substring(0,3);
            if (method != 'tmp'){
                $.post(url,parameters,function(data){ 
                    data = JSON.parse(data);
                    Nodes = data['Nodes'];
                    rootId = data['rootId'];
                    maxDepth = data['maxDepth'];
                    leafNodes = data['leafNodes'];
                    nodeDepths = data['nodeDepths'];
                    TREE_TYPE = data['TREE_TYPE'];
                    NODE_RADIUS = data['NODE_RADIUS'];
                    stepX = data['stepX'];
                    stepY = data['stepY'];
                    var leafs = document.getElementById("leafnodes");
                    var htus = document.getElementById("htunodes");
                    for (var id in Nodes){
                        var node = Nodes[id];
                        var newli = document.createElement('li');
                        newli.id = id;
                        newli.style.color = node['branch_color'];
                        
                        if (node['name_txt']){
                            newli.innerHTML = "<div class='node' ><a>"+node['name_txt']+"  <span class='inline-sub'>"+id+"</span></a></div>";
                        } else {
                            newli.innerHTML = "<div class='node'><a>"+id+"</a></div>";
                        }
                        
                        newli.addEventListener('click',NodeHover,false);
                        
                        if (0<node['children'].length){
                            htus.appendChild(newli);
                        } else {
                            leafNodes.push(id);
                            leafs.appendChild(newli);
                        }
                        
                    }
                    plotDendrogram();
                });
            } else { 
                $.post(url,parameters,function(nodes){ 
                    nodes = JSON.parse(nodes);
                    // Do some DOM manipulation with the data contained in the JSON Object
                    var leafs = document.getElementById("leafnodes");
                    var htus = document.getElementById("htunodes");
                    for(var x=0; x < nodes.length; x++) {
                        var node = nodes[x];
                        var id = node['gpe_node_id'];
                        Nodes[id] = node;
                        var newli = document.createElement('li');
                        newli.id = id;
                        newli.style.color = node['branch_color'];
                        
                        //see if the node is the root node
                        //root node should always be parent_gpe_id = 0
                        if (Nodes[id]["parent_gpe_id"] == 0) {
                            rootId = id;
                        }
                    
                        if (node['name_txt']){
                            newli.innerHTML = "<div class='node' ><a>"+node['name_txt']+"  <span class='inline-sub'>"+id+"</span></a></div>";
                        } else {
                            newli.innerHTML = "<div class='node'><a>"+id+"</a></div>";
                        }
                        
                        newli.addEventListener('click',NodeHover,false);
                        
                        if (0<node['children'].length){
                            htus.appendChild(newli);
                        } else {
                            leafNodes.push(id);
                            leafs.appendChild(newli);
                        }
                        
                    };
                    plotDendrogram();
                });
              }
            });
    </script>
</head>
<body>
<div id="wrapper">
    {{ header }}
    <div id="content">
        <div id="taxalist">
        <div id="title">Leaf Nodes</div><br />
        <ul id="leafnodes" class="nodes">
        </ul>
        <div id="title">HTU Nodes</div><br />
        <ul id="htunodes" class="nodes">
        </ul>
        </div>
        <div id="tree">
            <canvas id="tree-canvas" height="450" width="435"></canvas>
            <div id="tool_container">
                <div class="tools">
                    {{ toolMenu }}
                </div>
            </div>
            <canvas id="highlight-node"></canvas>
        </div>
    </div>
    {{ bottomMenu }}
</div>
</body>
</html>
